<template>
  <div>
    <top-label v-model="index">
      <span :slot="0">调洪演算</span>
      <span :slot="1">调洪演算历史数据</span>
      <span :slot="2">其他防洪能力演算</span>
    </top-label>
    <el-row>
      <flood-calculus-body
        v-if="index === 0 && dataSource"
        :tailingPondId="tailingPondId"
      ></flood-calculus-body>
      <flood-calculus-data
        v-if="index === 1 && dataSource"
        :tailingPondId="tailingPondId"
      ></flood-calculus-data>
      <other-flood-calculus
        v-if="index === 2 && dataSource"
        :tailingPondId="tailingPondId"
      ></other-flood-calculus>
    </el-row>
  </div>
</template>

<script>
import TopLabel from "~/components/TopLabel";
import FloodCalculusBody from "~/views/sefety-technology/flood-calculus/FloodCalculusBody";
import FloodCalculusData from '~/views/sefety-technology/flood-calculus/FloodCalculusData'
import OtherFloodCalculus from '~/views/sefety-technology/flood-calculus/OtherFloodCalculus'

export default {
  name: "FloodCalculus",
  components: {
    TopLabel,
    FloodCalculusBody,
    FloodCalculusData,
    OtherFloodCalculus
  },
    props: {
    tailingPondIds: Number,
    require: true
  },
  data () {
    return {
      index: 0,
      tailingPondId: null,
      dataSource: false
    }
  },
  watch: {
    tailingPondIds: {
      handler (newName, oldName) {
        this.tailingPondId = this.tailingPondIds
        if (this.tailingPondId !== null) this.dataSource = true
        this.$forceUpdate()
      },
      deep: true,
      immediate: true

    }
  }
}
</script>

<style scoped>
</style>